<!--
 * @Description: 墙布变更明细
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-11 09:49:19
 * @FilePath: /yuxiuproweb/src/views/qb/change/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="'变更单详情'"
    :visible.sync="shows"
    width="1000px"
    append-to-body
  >
    <el-descriptions title="" direction="vertical" border :column="4">
      <el-descriptions-item label="单号">
        <span>{{ oldOrder.orderId }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="收货人">
        <span>{{ oldOrder.consignee }}</span>
        <span v-if="oldOrder.consignee != newOrder.consignee" class="red">{{
          newOrder.consignee
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <span>{{ oldOrder.telnum }}</span>
        <span v-if="oldOrder.telnum != newOrder.telnum" class="red">{{
          newOrder.telnum
        }}</span>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="">
        <el-tag size="small"></el-tag>
      </el-descriptions-item> -->
      <el-descriptions-item label="收货地址">
        <div>{{ oldOrder.deliveryAddress }}</div>
        <div
          v-if="oldOrder.deliveryAddress != newOrder.deliveryAddress"
          class="red"
        >
          {{ newOrder.deliveryAddress }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="配送方式">
        <span>{{ oldOrder.deliveryMethod }}</span>
        <span
          v-if="oldOrder.deliveryMethod != newOrder.deliveryMethod"
          class="red"
          >{{ newOrder.deliveryMethod }}</span
        >
      </el-descriptions-item>
      <el-descriptions-item label="返利金账户">
        <span>{{ oldOrder.isUsingRebate == 1 ? "使用" : "不使用" }}</span>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="客户">
        <span>{{ oldOrder.clientName }}</span>
      </el-descriptions-item> -->
      <el-descriptions-item label="单据类型" v-if="oldOrder.orderType">
        <span> {{ dict.label.qb_order_state[oldOrder.orderType] }}</span>
        <span v-if="oldOrder.orderType != newOrder.orderType" class="red">{{
          dict.label.qb_order_state[newOrder.orderType]
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="备注" v-if="oldOrder.notes">
        <div>{{ oldOrder.notes }}</div>
        <div v-if="oldOrder.notes != newOrder.notes" class="red">
          {{ newOrder.notes }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="金额">
        <div class="priceSty">
          <span>订单总计:￥{{ totalPriceFun(oldOrder) }}</span>
          <span>本单金额:￥{{ oldOrder.totalPrice }}</span>
          <span>包装:￥{{ oldOrder.packingFee }}</span>
          <span>快递:￥{{ oldOrder.logisticsFee }}</span>
          <span>零裁:￥{{ oldOrder.zeroCutFee }}</span>
        </div>
        <div class="priceSty">
          <span v-if="oldOrder.totalPrice != newOrder.totalPrice" class="red"
            >订单总计:￥{{ totalPriceFun(newOrder) }}</span
          >
          <span v-if="oldOrder.totalPrice != newOrder.totalPrice" class="red"
            >本单金额:￥{{ newOrder.totalPrice }}</span
          >
          <span v-if="oldOrder.packingFee != newOrder.packingFee" class="red"
            >包装:￥{{ oldOrder.packingFee }}</span
          >
          <span
            v-if="oldOrder.logisticsFee != newOrder.logisticsFee"
            class="red"
            >快递:￥{{ newOrder.logisticsFee }}</span
          >
          <span v-if="oldOrder.zeroCutFee != newOrder.zeroCutFee" class="red"
            >零裁:￥{{ newOrder.zeroCutFee }}</span
          >
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <el-table ref="itemTable" :data="oldOrder.productList" :min-height="100">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" label="ID" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="型号" align="center" width="180" prop="name">
        <template slot-scope="scope">
          <div>
            <div>{{ scope.row.name }}</div>
            <div
              class="red"
              v-if="scope.row.name != newOrder.productList[scope.$index].name"
            >
              {{ newOrder.productList[scope.$index].name }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="长度" align="center" prop="length">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.length }}</span>
            <span
              class="red"
              v-if="
                scope.row.length != newOrder.productList[scope.$index].length
              "
            >
              {{ newOrder.productList[scope.$index].length }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="高度" align="center" prop="height">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.height }}</span>
            <span
              class="red"
              v-if="
                scope.row.height != newOrder.productList[scope.$index].height
              "
            >
              {{ newOrder.productList[scope.$index].height }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="工艺要求" align="center" prop="technology">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.technology | technologyFormat }}</span> -->
          <div>
            <div>{{ scope.row.technology | technologyFormat }}</div>
            <div
              class="red"
              v-if="
                scope.row.technology !=
                newOrder.productList[scope.$index].technology
              "
            >
              {{
                newOrder.productList[scope.$index].technology | technologyFormat
              }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="状态"
        align="center"
        prop="variationStatus"
        min-width="80"
      ></el-table-column> -->
      <el-table-column label="备注" align="center" prop="remark" width="180">
        <template slot-scope="scope">
          <div>
            <div>{{ scope.row.remark }}</div>
            <div
              class="red"
              v-if="
                scope.row.remark != newOrder.productList[scope.$index].remark
              "
            >
              {{ newOrder.productList[scope.$index].remark }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <!-- <el-button
        type="success"
        v-if="data.state != 1"
        @click="$emit('handleExamine', data)"
        >审核</el-button
      >
      <el-button @click="shows = false">取 消</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import { getQbChangeListItem } from "@/api/qb/change.js";
import { getOrder } from "@/api/qb";
import { listClient } from "@/api/mes/md/client";
export default {
  components: {},
  dicts: ["qb_order_state"],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "收货人不能为空", trigger: "change" },
        ],
      },
      clientList: [], //客户信息
      oldOrder: {},
      newOrder: {},
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    this.handleUpdate();
    // this.getListClient();
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      console.log(this.data);
      getOrder(this.data.orderId).then((res) => {
        this.newOrder = res.data;
        this.oldOrder = JSON.parse(this.data.oldOrder);
        this.$forceUpdate();
      });
    },

    /** 提交按钮 */
    submitForm() {
      console.log("提交", this.form);

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!!this.form.deliveryAddressId) {
            updateAddressListItem(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addAddressListItem(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
    // 查询客户信息
    getListClient(clientName = "") {
      listClient({
        pageNum: 1,
        pageSize: 100,
        enableFlag: "Y",
        clientName,
      }).then(({ rows }) => {
        this.clientList = rows;
      });
    },
    totalPriceFun(row) {
      var total = 0;
      total +=
        Number(row.totalPrice) +
        Number(row.zeroCutFee) +
        Number(row.packingFee) +
        Number(row.logisticsFee);
      return total.toFixed(2);
    },
  },
  filters: {
    technologyFormat(data) {
      var str = "";
      switch (data) {
        case 0:
          str = "冷胶";
          break;
        case 1:
          str = "热胶";
          break;
        case 2:
          str = "无工艺";
          break;
        case 3:
          str = "先冷后热";
          break;
        default:
          break;
      }
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
.red {
  color: #f43e3e;
}
.priceSty span {
  margin: 0 8px;
}
</style>
